/**
 * Created by ljy on 2016/6/26.
 */

/*主屏切换*/
$(".leftSide ul li").click(function () {

    console.log(0)
    $(".rightSide>ul>li").slideUp(500)
    var index = $(this).index()
    if(index === 0){
        $(".rightSide>ul>li:eq("+ index +")").slideDown(500)
    }else if(index === 1) {
        $(".rightSide>ul>li:eq("+ index +")").slideDown(500)
    }else{
        $(".rightSide>ul>li:eq("+ index +")").slideDown(500)
    }
})

/*canvas*/
//动态创建一个image标签
var image = new Image();
image.src = "images/estell.png";

var cvs = $("#canvas")

var ctx = cvs[0].getContext("2d")

function Animate(x,y,w,h,image,ctx){
    this.x = x;
    this.y = y;
    this.h = h;
    this.w = w;
    this.img = image;
    this.ctx = ctx;
    this.col = 0;
    this.row = 0;
}
Animate.prototype.render = function () {
    var _this = this;
    this.img.addEventListener("load", function () {
        setInterval(function () {
            _this.ctx.clearRect(_this.x,_this.y,_this.w,_this.h);
            if(_this.col >= 7) {
                _this.col = 0;
                _this.row++;
                if(_this.row >= 7) {
                    _this.row = 0;
                }
            }else{
                _this.col++;
            }
            _this.ctx.drawImage(_this.img,
                _this.col*256,_this.row*256,256,256,
                _this.x,_this.y,_this.w,_this.h);

        },100)
    })
}


var anim = new Animate(50, 50, 256, 256, image, ctx);
anim.render();










